<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import {listNode} from "../../../http/rabbitmq/node.js";
import {rabbitmqStore} from "../../../stores/counter.js";
import {onBeforeRouteLeave} from "vue-router";
import ByteTools from "../../../tools/ByteTools.js";
import moment from "moment";
import {resetNode} from "../../../http/rabbitmq/common.js";

const nodeName = ref("")
const nodeTableData = ref([])

function handleNodeList() {
  listNode().then(response => {
    nodeTableData.value = response
  })
}


function handleNodeReset(name) {
  resetNode(name).then(response => {
    nodeTableData.value = response
  })
}

onMounted(() => {
  handleNodeList()
  rabbitmqStore().setTimer(handleNodeList)
})

onUnmounted(() => {
  clearInterval(rabbitmqStore().timer)
  rabbitmqStore().deleteTimer()
})

onBeforeRouteLeave(() => {
  clearInterval(rabbitmqStore().timer)
  rabbitmqStore().deleteTimer()
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden;">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="Name">
          <el-input v-model="nodeName" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleNodeList">Search</el-button>
          <el-button type="primary" @click="showNodeCreate({})">New</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        highlight-current-row
        :data="nodeTableData" border style="width: calc(100% - 5px); height: calc(100% - 50px)">
      <el-table-column prop="name" label="name" min-width="100">
        <template #default="scope">
          <router-link :to="{path:'/node-details', query: { name: scope.row.name, vhost: scope.row.vhost }}">
            {{ scope.row.name }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="mem" width="130">
        <template #default="scope">
          <el-text :type="(scope.row.mem_used / scope.row.mem_limit) > rabbitmqStore().memUsedRate ? 'danger' : ''">
            used : {{ ByteTools.formatBytes(scope.row.mem_used, 0) }} <br>
            limit: {{ ByteTools.formatBytes(scope.row.mem_limit, 0) }}
          </el-text>
        </template>
      </el-table-column>
      <el-table-column label="disk" width="120">
        <template #default="scope">
          <el-text :type="(scope.row.disk_free_limit / scope.row.disk_free) > rabbitmqStore().diskFreeRate ? 'danger' : ''">
            free : {{ ByteTools.formatBytes(scope.row.disk_free, 0) }} <br>
            limit : {{ ByteTools.formatBytes(scope.row.disk_free_limit, 0) }}
          </el-text>
        </template>
      </el-table-column>
      <el-table-column label="fd" width="130">
        <template #default="scope">
          used : {{ scope.row.fd_used }} <br>
          limit : {{ scope.row.fd_total }}
        </template>
      </el-table-column>
      <el-table-column label="sockets" width="130">
        <template #default="scope">
          used : {{ scope.row.sockets_used }} <br>
          limit : {{ scope.row.sockets_total }}
        </template>
      </el-table-column>
      <el-table-column label="proc" width="130">
        <template #default="scope">
          used : {{ scope.row.proc_used }} <br>
          limit : {{ scope.row.fd_total }}
        </template>
      </el-table-column>
      <el-table-column prop="uptime" label="uptime" width="120">
        <template #default="scope">
          {{ moment.duration(scope.row.uptime).humanize() }}
        </template>
      </el-table-column>
      <el-table-column prop="processors" label="cores" width="70"/>
      <el-table-column label="operations" width="140" fixed="right">
        <template #default="scope">
          <el-popconfirm
              width="230"
              hide-icon
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleNodeReset(scope.row.name)"
              :title="'是否重置节点 [ ' + scope.row.name + ' ] ？'">
            <template #reference>
              <el-button type="danger">
                Reset Node
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<style scoped>

</style>